<template>
  <div class="main-bg">
    <div v-for="answerData in answerList" :key="answerData.id" >
      <div class="entity-item">
        <div class="title" @click="toAnswerInfo(answerData.id, answerData.questionId)">
          {{ answerData.questionTitle }}
        </div>
        <div class="displayText" @click="toAnswerInfo(answerData.id, answerData.questionId)">
          {{ answerData.displayText }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/settings/axios";
import router from "@/router";

export default {
  name: "OneAnswerBox",
  data() {
    return {
      answerList: [],
      loginUser: {},
    }
  },
  components:{},
  watch: {

  },
  async mounted() {

    let answerList = await axios.get("/shane_answer/my_posted");
    this.answerList = answerList;
    console.log(answerList);
  },
  methods: {
    toAnswerInfo(answerId, questionId) {
      let params = {
        "answerId": answerId,
        "questionId": questionId,
      };
      let routeData =router.resolve({
        path: "/answer/info",
        query: params
      });
      window.open(routeData.href, '_blank')
    }

  },

};
</script>

<style scoped>
.main-bg {
  background-color: #ffffff;
  width: 70%;
  box-shadow: 0 1px 3px hsla(0, 0%, 7%, .1);
  /*height: 100vh;*/
  height: auto;
  margin: 20px auto 0 auto;
}

.title {
  color: #000;
  font-size: larger;
  padding-bottom: 10px;
  font-weight: bold;
  cursor:pointer;
}
.displayText {
  padding-bottom: 10px;
  cursor:pointer;
}

</style>
